﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>PAGE - 01</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
        .isvalid {
            border-color: red;
        }

        .ltext {
        }
    </style>

    <script type="text/javascript">

    </script>

</head>
<body>
    <div id="abc">
        <table>
            <tr style="height:20px">
                <td colspan="2">
                    <span id="mes"></span>
                </td>
            </tr>
            <tr>
                <td>Tên: </td>
                <td>
                    <input type="text" name="Name" id="txtName" placeholder="tên" />
                    <!--<span class="ltext"></span>-->
                    <label></label>
                </td>
            </tr>
            <tr>
                <td>Tuổi: </td>
                <td>
                    <input type="text" name="Age" id="txtAge" placeholder="tuổi" /><span class="ltext"></span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" name="Action" id="btnAct" value="He" onclick="Say();" />
                </td>
            </tr>
        </table>
        <div id="loading-place" style="height: 500px;width: 500px">

        </div>

    </div>

    <script type="text/javascript">
        var curPerson = undefined;
        $(function () {
            $('input[type="text"]').keyup(function () {
                var a = $(this);
                //console.log(a);
                //a = $(this).val().trim();

                if ($(this).val().trim() == 0) {
                    $(this).addClass('isvalid');
                    $(this).next().text(" - test .next() function");
                } else {
                    $(this).removeClass('isvalid');
                    $(this).next().text("");
                }
            });

           
        });

        function Say(e) {
            var name = $('#txtName').val().trim();
            var age = $('#txtAge').val().trim();

            if (validInfo()) {
                if (!curPerson) {
                    curPerson = new Person(name, age);
                } else {
                    curPerson.name = name;
                    curPerson.age = age;
                }
                curPerson.sayHello();
            }
        }

        function validInfo() {
            var name = $('#txtName').val().trim();
            var age = $('#txtAge').val().trim();

            if (name.length == 0) {
                $('#txtName').addClass('isvalid');
                //$('#txtName').focus();
                return false;
            } else {
                $('#txtName').removeClass('isvalid');
            }

            if (age.length == 0) {
                $('#txtAge').addClass('isvalid');
                //$('#txtAge').focus();
                return false;
            } else {
                $('#txtAge').removeClass('isvalid');
            }

            return true;
        }

        var Person = function (name, age) {
            this.name = name;
            this.age = age;
            this.sayHello = function () {
                alert(name + " : Hello! I'm " + name + ", " + age + " year old");
            }
        }
    </script>

</body>
</html>